<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>

<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <script th:inline="javascript">
        // 导航条缩放功能
        function toggleNavigation() {
            const nav = document.querySelector('body > section > nav');
            const iframe = document.querySelector('body > section > iframe');
            const logoImages = document.querySelectorAll('body > header > img');
            const langSwitchNav = document.querySelector('body > header > nav:nth-child(2)');
            const userInfoNav = document.querySelector('body > header > nav#gd-user-info-id');
            const isCollapsed = nav.classList.contains('collapsed');
            
            if (isCollapsed) {
                nav.classList.remove('collapsed');
                iframe.classList.remove('expanded');
                logoImages.forEach(img => img.classList.remove('hidden'));
                langSwitchNav.classList.remove('hidden');
                userInfoNav.classList.remove('hidden');
                sessionStorage.setItem('navCollapsed', 'false');
                sessionStorage.setItem('headerCollapsed', 'false');
            } else {
                nav.classList.add('collapsed');
                iframe.classList.add('expanded');
                logoImages.forEach(img => img.classList.add('hidden'));
                langSwitchNav.classList.add('hidden');
                userInfoNav.classList.add('hidden');
                sessionStorage.setItem('navCollapsed', 'true');
                sessionStorage.setItem('headerCollapsed', 'true');
            }
        }

        // 页面加载时检查导航条状态
        $(function() {
            // 检查之前的状态
            const isNavCollapsed = sessionStorage.getItem('navCollapsed') === 'true';
            const isHeaderCollapsed = sessionStorage.getItem('headerCollapsed') === 'true';
            
            if (isNavCollapsed) {
                document.querySelector('body > section > nav').classList.add('collapsed');
                document.querySelector('body > section > iframe').classList.add('expanded');
            }
            
            if (isHeaderCollapsed) {
                const logoImages = document.querySelectorAll('body > header > img');
                const langSwitchNav = document.querySelector('body > header > nav:nth-child(2)');
                const userInfoNav = document.querySelector('body > header > nav#gd-user-info-id');
                
                logoImages.forEach(img => img.classList.add('hidden'));
                langSwitchNav.classList.add('hidden');
                userInfoNav.classList.add('hidden');
            }
            
            // 原始功能代码
            $("#gd-user-info-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })

            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })

            $("ul#gd-sys-memu-id > li").click(function () {
                $("ul#gd-sys-memu-id > li").removeClass('active')
                $(this).addClass('active')
                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-memu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })
            
            // 防止URL被修改
            $(window).on('hashchange', function() {
                if (window.location.hash === '#') {
                    history.replaceState(null, null, window.location.pathname);
                }
            });
            
            // 初始化时清除hash
            if (window.location.hash === '#') {
                history.replaceState(null, null, window.location.pathname);
            }
        })//ready function
    </script>
    <style>
        /* 添加导航栏缩放相关样式 */
        body > section > nav.collapsed {
            flex-basis: 0;
            overflow: hidden;
            transition: flex-basis 0.3s ease;
        }
        
        body > section > iframe.expanded {
            flex-grow: 1;
            transition: flex-grow 0.3s ease;
        }
        
        body{
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img{
            height: 80px
        }

        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > section{
            width: 100%;
            flex-grow: 1;
            display: flex;

        }

        body > section > nav{
            flex-basis: 130px;
            height: 100%;

        }

        body > section > iframe{
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id{
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .menu-level3 > li{
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in{
            display:block;
        }

        .hidden {
            display: none !important;
        }

        ul.menu-level3 > li.focus{
            background-color: #dfd;
        }

    </style>
</head>
<body>

<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>

        <a th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'" sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>
                <a href="#" >
                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>
            <li>
                <a href="#" >
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>
            <li>
                <a th:href="@{/logout}" >
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}">

                    </span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<ul id="gd-sys-memu-id" class="nav nav-tabs">
    <li>
        <button id="toggle-nav-btn" class="btn btn-default" onclick="toggleNavigation()" style="margin-right: 10px;">
            <i class="glyphicon glyphicon-resize-horizontal"></i>
        </button>
    </li>
    <li th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul  class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child} ">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child} ">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>
    <iframe name="contents" src="about:blank"></iframe>
</section>

</body>
</html>
